<template>
  <div class="orderDetail">
    <div class="head">
      <div class="header">
        <div @click="back()" class="iconfont ret icon-fanhui"></div>
        <div>订单详情</div>
      </div>
    </div>
    <div class="card">
      <div class="left">
        <div>{{ cardName }}</div>
        <div class="down">
          <span>条件退</span>
          <span>无需换票</span>
        </div>
      </div>
      <div class="right">
        <div class="prize">
          <span class="rmb">￥</span>
          <span>{{ prize }}</span>
          <span class="num">/张</span>
        </div>
      </div>
    </div>
    <div class="gray"></div>
    <div>
      <div class="buy">
        <div class="left">购买数量</div>
        <div class="right">
          <ul id="car">
            <li><button @click="subtract">-</button></li>
            <li><input type="text" v-model="count" /></li>
            <li><button @click="add">+</button></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- <div class="gray"></div> -->
    <div class="grayLit"></div>
    <div class="rank">
      <div class="position">
        <span>总计：</span>
        <span class="orange">￥</span>
        <span class="orange">{{ total }}</span>
      </div>
      <div class="topList">
        <div @click="up">提交订单</div>
      </div>
    </div>
    <!-- <van-contact-edit class="list"/> -->
  </div>
</template>

<style lang = "less">
.orderDetail {
  height: 100vh;
  position: relative;
  /* background: rgb(240, 242, 245); */
  .list {
    padding: 0;
    margin: 0;
    button {
      display: none;
    }
    .van-cell {
      border-bottom: 1px solid #eee;
    }
  }
  .head {
    color: white;
    background: rgb(76, 192, 228);
  }
  .gray {
    height: 9px;
    background-color: #f0f2f5;
  }
  .grayLit {
    height: 1px;
    background-color: #e0e0e0;
  }
  .header {
    padding: 10px;
    padding-left: 20px;
    display: flex;
    width: 60%-6px;
    justify-content: space-between;
    .ret {
      padding-top: 3px;
      color: white;
    }
  }
  .card {
    display: flex;
    padding: 15px 5px;
    border-bottom: 1px solid #e0e0e0;
    .left {
      text-align: left;
      margin-left: 10px;
      width: 70%;
      .down span {
        float: left;
        font-size: 12px;
        margin-top: 15px;
        color: #00afc7;
        border: 1px solid #a5e4ec;
        &:last-child {
          margin-left: 10px;
        }
      }
    }
    .right {
      margin-top: 18px;
      width: 30%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .prize {
        color: orange;
        font-size: 20px;
        .rmb {
          font-size: 12px;
        }
        .num {
          color: gray;
          font-size: 12px;
        }
      }
    }
  }
  .buy {
    margin: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .right {
      border: 0.5px solid gray;
      ul,
      li {
        list-style: none;
      }
      li {
        float: left;
        button {
          padding: 5px 10px;
          color: white;
          background-color: rgb(76, 192, 228);
          border: none;
        }
      }
      input {
        border: none;
        padding: 5px 0;
        width: 34px;
        text-align: center;
      }
    }
  }
  .rank {
    border-top: 0.5px solid #e0e0e0;
    height: 50px;
    width: 100vw;
    line-height: 50px;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    .position {
      color: gray;
      width: 50%;
      height: 100%;
      .orange {
        color: orange;
      }
    }
    .topList {
      background-color: orange;
      color: white;
      width: 50%;
      height: 100%;
    }
  }
}
</style>

<script>
export default {
  data() {
    return {
      count: 1,
      total: 0,
      prize: 0,
      cardName: "",
      editingContact: {
        name: "姓名",
        tel: "手机号",
      },
    };
  },
  methods: {
    add: function () {
      this.count++;
      this.total = this.prize * this.count;
    },
    subtract: function () {
      if (this.count <= 1) {
        this.count = 1;
      } else {
        this.count -= 1;
      }
      this.total = this.prize * this.count;
    },
    back() {
      this.$router.go(-1);
    },
    up() {
      let cardName = this.cardName;
      let prize = this.prize;
      let num = this.count;
      let flag = false;
      let id = this.$store.state.orderDatas.length;
      this.$store.commit("edit", { cardName, prize, num, flag, id });
      this.$router.push({
        name: `order`,
      });
    },
  },
  created() {
    this.prize = this.$route.params.message.prize;
    this.cardName = this.$route.params.message.cardName;
    this.total = this.prize * this.count;
    if(this.$store.state.loginFlag == false){
      this.$router.push({
        name: `login`,
      });
    }
  },
  components: {},
};
</script>